<template>
  <h2>watch监听</h2>
  <span>{{ count }}</span>
  <p>{{ obj }}</p>
  <button @click="add">btn</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const count = ref(3);
    const obj = ref({
      a: 3,
    });

    const add = () => {
      // count.value++;
      obj.value.a = 5;
    };

    // watch是一个函数，需要解构
    // 第一个参数是监听哪一个响应式数据
    // 第二个参数是改变的时候触发的回调函数
    // 第三个参数是可选的配置选项
    watch(count, (val, oldVal) => {
      console.log("count改变了", val, oldVal);
    });

    watch(
      obj,
      () => {
        console.log("obj改变了");
      },
      {
        deep: true,
        immediate: true,
      }
    );

    return {
      count,
      add,
      obj,
    };
  },
};
</script>
